<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- <div
      id="card"
      class="bg-[#fff] flex flex-col justify-center fixed top-48 right-24 p-7 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] w-40"
    >
      <div id="singlePlayArea">
        <header class="mb-2"><strong>单次</strong></header>
        <button id="singlePlay" class="btn btn-primary w-full">Play</button>
        <div class="flex justify-center items-center">
          <input
            id="order"
            type="text"
            class="form-control"
            style="height: 36px"
            placeholder="序号"
            value="1"
          />
          <div
            class="flex flex-col w-12 h-12 my-2 mx-0 items-center justify-center gap-1"
          >
            <svg
              id="up"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-arrow-up-circle"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"
              />
            </svg>
            <svg
              id="down"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-arrow-down-circle"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"
              />
            </svg>
          </div>
        </div>
        <select id="singlePlayInterval" class="form-select mb-2">
          <option value="1000">1秒</option>
          <option value="2000" selected>2秒</option>
          <option value="3000">3秒</option>
          <option value="4000">4秒</option>
        </select>
      </div>
      <div
        class="w-full border-t border-dashed border-[#cccccc] h-0 mb-2"
      ></div>
      <div id="loopPlayArea">
        <header class="mb-2"><strong>循环</strong></header>
        <button id="loopPlay" class="btn btn-primary w-full">Play</button>
        <select id="loopPlayInterval" class="form-select mt-2">
          <option value="1000">1秒</option>
          <option value="2000" selected>2秒</option>
          <option value="3000">3秒</option>
          <option value="4000">4秒</option>
        </select>
      </div>
    </div> -->
    <script src="index.js"></script>
  </body>
</html>
